<template>
    <div class="table-container">
        <div class="table-container-header">
            <div class="header-item-2">视图名称</div>
            <div class="header-item-2">视图描述</div>
            <div class="header-item-2">最新版本</div>
            <div class="header-item-2">状态</div>
            <div class="header-item-1">操作</div>
        </div>
        <Item v-for="item in data.data" :key="item.name" :item="item" @deleteChild="deleteChild" @deleteParent="deleteParent"></Item>
    </div>
    <div class="pagination">
        <n-pagination v-model:page="page" :page-count="data.total" />
    </div>
</template>

<script setup>
import { NPagination } from 'naive-ui';
import Item from '../components/TableItem.vue'
const page = ref(1)
const data = ref({
    data: [
        {
            id: 1,
            name: "表单视图",
            desc: "这是一段描述，关于这个视图的描述",
            version: "1.0",
            status: 1,
            children: [
                {
                    id: 1,
                    version: "2.0",
                    status: 1,
                    created_at: "2021-09-15 14:36:18",
                    updated_at: "2021-09-15 14:36:18",
                },
                {
                    id: 2,
                    version: "1.0",
                    status: 2,
                    created_at: "2021-09-15 14:36:18",
                    updated_at: "2021-09-15 14:36:18",
                }
            ]
        },
        {
            id: 2,
            name: "pc端汇总视图",
            desc: "这是一段描述，关于这个视图的描述",
            version: "1.0",
            status: 2,
            children: [
                {
                    id: 1,
                    version: "2.0",
                    status: 1,
                    created_at: "2021-09-15 14:36:18",
                    updated_at: "2021-09-15 14:36:18",
                },
                {
                    id: 2,
                    version: "1.0",
                    status: 2,
                    created_at: "2021-09-15 14:36:18",
                    updated_at: "2021-09-15 14:36:18",
                }
            ]
        },
        {
            id: 3,
            name: "患者移动端视图",
            desc: "这是一段描述，关于这个视图的描述",
            version: "1.0",
            status: 1,
            children: [
                {
                    id: 1,
                    version: "2.0",
                    status: 1,
                    created_at: "2021-09-15 14:36:18",
                    updated_at: "2021-09-15 14:36:18",
                },
                {
                    id: 2,
                    version: "1.0",
                    status: 2,
                    created_at: "2021-09-15 14:36:18",
                    updated_at: "2021-09-15 14:36:18",
                }
            ]
        }
    ],
    total: 100,
})


const deleteParent = (id) => {
    console.log(id)
    // 这里mock删除，简单点做法，删除后刷新一下查询接口
    data.value.data = data.value.data.filter(item => item.id !== id)
}

const deleteChild= (id) => {
    console.log(id)
}

</script>

<style scoped>
.table-container{
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem;
    background-color: rgb(255, 255, 255);
    border-width: 1px;
    margin: 1rem;
}
.table-container-header {
    font-weight: 600;
    padding: 0.75rem;
    background-color: rgb(229, 231,235);
    border-radius: 0.25rem;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    display: grid;
    margin-bottom: 0.5rem;
}
.header-item-2 {
    grid-column: span 2 / span 2;
}

.header-item-1 {
    grid-column: span 1 / span 1;
}
.pagination{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin: 1rem;
}
</style>